<template>
  <div id="upload-com">
    <el-upload
      class="el-upload-com"
      ref="upload"
      drag
      :auto-upload="false"
      accept=".doc,.docx"
      name="law_regulations"
      :file-list="fileList"
      :headers="headers"
      :data="postData"
      :on-change="onChange"
      :on-success="onSuccess"
      :on-error="onError"
      :on-remove="onRemove"
      :action="$api.uploadUrl()"
    >
      <!-- <i class="el-icon-upload"></i> -->
      <div class="el-upload-com-content">
        <img class="el-upload-img" src="../assets/upload-img.png">
        <div class="el-upload-tips">上传制度：点击或将制度文件拖拽到这里，每次只能对比一个文件</div>
        <div class="el-upload__text expend">支持扩展名：.doc  .docx</div>
      </div>
    </el-upload>
    <el-button type="primary" class="compare-btn" @click="submitUpload" :loading="submitUploadLoading">对比</el-button>
    <result-dialog ref="resultDialog"></result-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import resultDialog from './result-dialog'
export default {
  components: {
    resultDialog
  },
  props: {
    currentNodes: {
      default: () => []
    }
  },
  data () {
    return {
      fileList: [],
      submitUploadLoading: false,
      timer: null
    }
  },
  watch: {
  },
  computed: {
    ...mapGetters({
      token: 'token'
    }),
    headers () {
      return {
        Authorization: 'Bearer ' + this.token
      }
    },
    postData () {
      let lawList = []
      this.currentNodes.map(e => {
        lawList.push(e.value)
      })
      return { law_list: JSON.stringify(lawList) }
    }
  },
  mounted () {

  },
  methods: {
    submitUpload () {
      if (this.currentNodes.length === 0) {
        this.$msgMnger.warn('请选择法规')
        return
      }
      if (this.currentNodes.length > 5) {
        this.$msgMnger.warn('最多选择5条法规同时对比')
        return
      }
      if (this.fileList.length === 0) {
        this.$msgMnger.warn('请上传对比的word文件')
        return
      }
      this.submitUploadLoading = true
      this.$refs.upload.submit()
    },
    restartCompare (id) {
      this.$confirm('对比失败，是否重新对比', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$api.restartCompare({ compare_id: id }).then(res => {
          if (res.code === 0) {
            this.startCompareStatus(id)
          } else {
            this.$msgMnger.httpError(res)
          }
        }).catch(e => {
          this.$msgMnger.httpError(e)
        })
      })
    },
    onChange (file, fileList) {
      let name = file.name
      let reg = /^.*\.(?:doc|docx)$/
      if (reg.test(name)) {
        this.fileList = fileList.slice(-1) // 最多保留一个文件
        if (this.fileList.length > 0) {
          this.$message({
            type: 'success',
            dangerouslyUseHTMLString: true,
            message: `<div style="margin:0 0 5px 0;">上传成功，每次只能对比一个文件</div><div>当前文件：${name}</div>`
          })
        }
      } else {
        this.clearFiles()
        this.$msgMnger.warn('请上传word文档，支持扩展名：.doc .docx')
      }
    },
    onSuccess (res) {
      this.submitUploadLoading = false
      if (res.code === 0) {
        this.$msgMnger.success('上传成功, 对比中...')
        this.startCompareStatus(res.data.id)
      } else {
        this.$msgMnger.httpError(res)
      }
      this.clearFiles()
    },
    onError (e) {
      this.submitUploadLoading = false
      this.$msgMnger.httpError(e)
      this.clearFiles()
    },
    onRemove () {
      this.clearFiles()
    },
    startCompareStatus (id) {
      if (!this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      this.$emit('changeLoading', true)
      this.timer = setInterval(() => {
        this.$api.compareStatus(id).then(res => {
          const status = res.data.status
          if (status === 3 || status === 4) {
            this.stopCompareStatus()
            this.$emit('changeLoading', false)
          }
          if (status === 3) {
            this.$msgMnger.success('对比成功')
            this.showResultDialog(id)
          }
          if (status === 4) {
            this.restartCompare(id)
          }
        }).catch(e => {
          this.stopCompareStatus()
          this.$msgMnger.httpError(e)
        })
      }, 3000)
    },
    stopCompareStatus () {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = null
    },
    showResultDialog (id) {
      this.$refs.resultDialog.showDialog(id)
    },
    clearFiles () {
      this.$refs.upload.clearFiles()
      this.fileList = []
    }
  }
}
</script>

<style lang="scss" scoped>

#upload-com{
  height: 100%;
  padding: 30px 0 0 0;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  .compare-btn{
    padding: 10px 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .el-upload-com-content{
    padding-top: 20px;
    width: 480px;
    margin: 0 auto;
    .el-upload-tips{
      font-weight: bold;
    }
  }
  .el-upload-img{
    // margin-top: 20px;
    width: 64px;
    float: left;
  }
  .el-upload__text{
    margin-top: 20px;
  }
  .expend{
    margin-top: 5px;
    color: $tertiary-text-color;
  }
}
</style>
<style lang="scss">
#upload-com{
  .el-upload{
    width: 100%;
    .el-upload-dragger{
      width: 100%;
      height: 120px;
    }
  }
  .el-upload-list{
    margin-top: -50px;
    .el-upload-list__item-name{
      display: inline !important;
      margin-right: 10px !important;
    }
    .el-icon-close{
      position: static !important;
    }
  }
}
</style>
